
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="form.start_time"
                        type="month"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="美团类型">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" v-if="form.table == 2">
                    <el-select clearable v-model="form.result" placeholder="对账结果">
                        <el-option v-for="item in resule" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="danger" @click="search" >搜索</el-button> 
                <el-button type="danger" @click="exportInfo" >导出明细</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
        </div> 
        
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 		交易时间	订单号	美团券码	类型	系统到账	美团到账	结果类型	处理状态	操作				 -->
                <el-table-column prop="trade_time" label="交易时间" fixed></el-table-column>
                <el-table-column prop="order_id" label="订单号" width="200"> </el-table-column>
                <el-table-column prop="coupon_no" label="美团券码" width="240"></el-table-column>
                <el-table-column prop="type_cn" label="类型"></el-table-column>

                <el-table-column prop="pay_from_cn" label="系统到账">
                    <template slot-scope="scope">
                        <p v-if="scope.row.coupon_price != null">{{scope.row.coupon_price}}</p>
                        <p v-else>--</p>
                    </template>    
                </el-table-column>               
                <el-table-column prop="settlement_price" label="美团到账"></el-table-column>
                <el-table-column prop="result" label="结果类型" width="230"></el-table-column>

                <el-table-column v-if="form.table==2" prop="status_cn" label="处理状态"></el-table-column>


                <el-table-column label="操作" prop="price_id" v-if="limitList.length>0 &&form.table==2">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i :class="scope.row.status == -1?'gray':''">{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        
        

        <el-dialog :title="dialogTitle" :visible.sync="dispostShow">
            <el-form :model="editForm">
                <!-- coupon_no   total_price -->
                <el-form-item v-if="dialogTitle == '魅平台券码不正确' || dialogTitle == '价格不一致'" :label="lable1txt"  :label-width="editW">
                    <el-input v-model="lable1" autocomplete="off"></el-input>
                </el-form-item> 
                <!-- order_status -->
                <el-form-item v-else-if="dialogTitle == '订单状态不一致'" label="调整订单状态" :label-width="editW">                    
                    <el-select v-model="editForm.order_status" placeholder="调整订单状态">
                        <el-option v-for="(item,a) in oprateRangetype" :key="a" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <p class="dialoginfo" v-else>同步违约金至结算单和对账单</p>
                <!-- remark -->
                <el-form-item label="备注" :label-width="editW">
                    <el-input type="textarea" v-model="editForm.remark"></el-input>
                </el-form-item>
                <!-- penalty 同步违约金 -->
                <p class="dialoginfo" v-if="dialogTitle == '价格不一致'">请确保价格差额已通过财务报销后再进行该操作</p>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dispostShow = false">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>


    </div>
  
</template>
<style lang="scss" scoped>
.tabContainer{
    .gray{
        color:#ccc
    }
}
.dialoginfo{
    margin-left: 150px;
    line-height: 30px;
    color: #F56C6C;
}
</style>
<style>
.setWidth{width:140px !important}
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
let dateO = new Date();
let y = dateO.getFullYear();
let ms = dateO.getMonth()+1
let m = ms>9?ms:'0'+ms
let da = y+'-'+m
export default {
   name: 'HelloWorld',
    data () {
    return {
        payforlist:[
            {status:'2',status_cn:"美团团购"},
            {status:'1',status_cn:"美团预订"}
        ],//美团类型
        resule:[
            {status:'正常',status_cn:'正常'},
            {status:'价格不一致',status_cn:'价格不一致'},
            {status:'订单状态不一致',status_cn:'订单状态不一致'},
            {status:'魅平台券码不正确',status_cn:'魅平台券码不正确'},
            {status:'美团用户违约金30%',status_cn:'美团用户违约金30%'},
            {status:'美团用户违约金100%',status_cn:'美团用户违约金100%'},
            {status:'违约金30%退款',status_cn:'违约金30%退款'},
            {status:'违约金100%退款',status_cn:'违约金100%退款'},
        ],
        form:{
            start_time:'',//da,
            page:1,
            size:20,
            end_time:'',
            table:1
        },
        limitList:[
            {url:'dispose',name:"处理"}
        ],
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        dialogTitle:'',//弹框的标题
        dispostShow:false,
        dialogdata:{

        },
        oprateRangetype:[
            {status:'-1',status_cn:"已取消"},
            {status:'3',status_cn:"已送达"},
        ], 
        lable1:'',
        editForm:{

        },  
        id:'', 
        editW:"150px",
        lable1txt:''    
    }
  }, 
   watch:{
        $route(to,from){
            let that = this;
            console.log('rr',that.$route.path)
            if(to.path != '/meituanBill'){
                that.form.table = 2;
            }else{
               that.form.table = 1;               
            }
            that.getList() 
        },
        dispostShow(n,o){
            this.editForm = {

            },
            this.lable1 = ""
        }
   },
   mounted(){
      let that = this;
      console.log('rr',that.$route.path)
      if(that.$route.path != '/meituanBill'){
        that.form.table = 2
      }
      abc.get(that,potUrl.meituanbill,that.form,(res)=>{
          that.tableData=res.data.list;
          that.total = res.data.total;
      })//列表
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    theClick(url,a){
        let that = this;
        that.dispostShow = true;
        that.dialogTitle = a.result;
        that.id = a.id
        if(that.dialogTitle === '魅平台券码不正确'){
            that.lable1txt = '输入正确的美团劵码'
        }else if(that.dialogTitle == '价格不一致'){
            that.lable1txt = '调整系统到账'
        }
        console.log(that.lable1txt)
    },
    comfirm(){
        //（魅平台券码不正确）处理的接口总是修改失败；-error
        let that = this;
        let params = that.editForm;
        params.id = that.id;
        if(that.dialogTitle === '魅平台券码不正确'){
            params.coupon_no = that.lable1
        }else if(that.dialogTitle == '价格不一致'){
            params.total_price = that.lable1
        }
        if(that.dialogTitle.indexOf('美团用户违约金') !=-1){
            params.penalty = 1
        }
        abc.post(that,potUrl.meituanprocess,params,(res)=>{
            params = null;
            that.dispostShow = false;
            that.getList()
        })

    },
    exportInfo(){
        let iData = '?token=' + abc.getSession('token') + '&user_id=' + abc.getSession('user_id') + '&store_id=' + abc.getSession("store_id") + '&platform=operate'
        //导出有问题，不会根据你的搜索的月份去导出相应月份的数据；也不会根据wiki写的table=1为正常单；table=2为异常单去导出（由于暂时不适用，没有去跟进修改。）-error
        window.location.href = abc.hostUrl + potUrl.meituanexportbill + iData;
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.meituanbill,that.form,(res)=>{
            that.tableData=res.data.list;
            that.total = res.data.total;
        })//列表
    }
  }
}
</script>
